<!doctype html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en-US"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8" lang="en-US"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-US" xmlns:th="http://www.thymeleaf.org"> <!--<![endif]-->
<head>
    <!-- META TAGS -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>学习生活交流论坛</title>

    <link rel="shortcut icon" href="../static/asserts/images/login_logo.png" />

    <!-- Style Sheet-->
    <link rel='stylesheet' id='bootstrap-css-css'  href='../static/asserts/css/bootstrap5152.css?ver=1.0' type='text/css' media='all' />
    <link rel='stylesheet' id='responsive-css-css'  href='../static/asserts/css/responsive5152.css?ver=1.0' type='text/css' media='all' />
    <link rel='stylesheet' id='pretty-photo-css-css'  href='../static/asserts/js/prettyphoto/prettyPhotoaeb9.css' type='text/css' media='all' />
    <link rel='stylesheet' id='main-css-css'  href='../static/asserts/css/main.css' type='text/css' media='all' />


    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="../static/asserts/js/html5.js"></script></script>
    <![endif]-->

</head>

<body>
<!-- Start of Header -->
<div th:replace="commons/bar::topbar(activeUri='chatting')"></div>
<!-- End of Header -->

<!-- End of Search Wrapper -->
<div style="background-image: url('../static/asserts/images/editormd-bg.jpg')">
<script type="text/javascript">
    var socket;

        if (!window.WebSocket) {
        window.WebSocket = window.MozWebSocket;
    }
    if (window.WebSocket) {
        socket = new WebSocket("ws://39.97.126.242:8888/websocket")
      //  socket = new WebSocket("ws://localhost:8888/websocket");
        socket.onmessage = function(event) {
            var ta = document.getElementById('responseText');
            ta.value = ta.value + '\n' + event.data
        };
        socket.onopen = function(event) {
            var ta = document.getElementById('responseText');
            ta.value += "连接开启!";
            socket.send(sessionStorage.getItem("username")+"上线了!");
        };
        socket.onclose = function(event) {
            var ta = document.getElementById('responseText');
            socket.send(sessionStorage.getItem("username")+"下线了!");
            ta.value = ta.value + "连接被关闭";
        };
    } else {
        alert("你的浏览器不支持 WebSocket！");
    }
    function send(message) {
        if (!window.WebSocket) {
            return;
        }
        if (socket.readyState == WebSocket.OPEN&&message&&message.length>1) {
            socket.send(sessionStorage.getItem("username")+message);
        }
        else if(!message||message.length<=1){
            alert("发送消息不能为空。");
        }
        else {
            alert("连接没有开启。");
        }
    }
</script>
<form onsubmit="return false;">
    <h1><center>讨论区</center></h1>
    <center><textarea id="responseText" style="width: 1000px; height: 600px;font-size: 15px;font-weight: bold"></textarea></center>
    <center><input type="text" name="message"  style="width: 800px;margin-bottom: auto" value="">
    <input th:if="${session.status}" type="button" value="发送消息" class="diy-btn" onclick="send(':'+this.form.message.value);this.form.message.value=''">
    <input type="button" class="diy-btn" onclick="javascript:document.getElementById('responseText').value=''" value="清空聊天记录"></center>
</form>
<br>
<br>
</div>
<!-- script -->
<script type='text/javascript' src='../static/asserts/js/jquery-1.8.3.min.js'></script>
<script type='text/javascript' src='../static/asserts/js/jquery.easing.1.34e44.js?ver=1.3'></script>
<script type='text/javascript' src='../static/asserts/js/prettyphoto/jquery.prettyPhotoaeb9.js?ver=3.1.4'></script>
<script type='text/javascript' src='../static/asserts/js/jquery.liveSearchd5f7.js?ver=2.0'></script>
<script type='text/javascript' src='../static/asserts/js/jflickrfeed.js'></script>
<script type='text/javascript' src='../static/asserts/js/jquery.formd471.js?ver=3.18'></script>
<script type='text/javascript' src='../static/asserts/js/jquery.validate.minfc6b.js?ver=1.10.0'></script>
<script type='text/javascript' src='../static/asserts/js/custom5152.js?ver=1.0'></script>
</body>
</html>